{extend name="public/base"/}
{block name="style"}

{/block}
{block name="body"}
<style>
    .menuBox li {
        float: left;
        width: 55px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 16px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }
</style>
{include file="public/header" /}

<div class="pageBox userBox" >
    <div class="userLeft">
        <div class="headPic">
            {if $avatar ==""}
            <img id="userPicShow" src="__PUBLIC__/novel/images/ser.png"/>
            {else}
            <img id="userPicShow" src="{$avatar}"/>
            {/if}
            <span>{$nickname}</span>
        </div>
        <ul>
            <li ><a href="/personal/info">我的主页</a></li>
            <li ><a href="/personal/bookcase">我的书架</a></li>
            <li ><a href="/personal/review">我的书评</a></li>
            <li class="liHove"><a href="/personal/paylog/">充值记录</a></li>
			<li ><a href="/personal/history/">阅读历史</a></li>
            <li ><a href="/personal/moneylog/">订阅记录</a></li>
            <li ><a href="/personal/bonuslog/">打赏记录</a></li>
			<li ><a href="{:config('writer_url')}">作家中心</a></li>
        </ul>    
    </div>
    <div class="userRight">
        <div class="Tit payIco">我的充值<span>全部充值</span></div>
        <div class="userPayBox">
            <ul class="payTit clearfix">
                <li>订单编号</li>
                <li>充值来源</li>
                <li>金额</li>
                <li>阅读币</li>
                <li>充值时间</li>
                <li>状态</li>
            </ul>
            {volist name="list" id="vo"}
            <ul >
                <li>{$vo.out_trade_no}</li>
                <li>
                	{if $vo.paytype == "alipay"}
                	支付宝支付
                	{else}
                	微信支付
                	{/if}
                </li>
                <li>{$vo.money}</li>
                <li>{$vo.money*100}</li>
                <li>{$vo.create_time|date="Y-m-d H:i:s", ###}</li>
                <li>
                	{if $vo.status==1}
                	已支付
                	{else}
                	未完成
                	{/if}
                </li>
            </ul>
            {/volist}
            <div style="text-align:center;margin:0 auto">{$page}</div>
        </div>
    </div>
</div>
{block name="include"}{include file="public:footer" /}{/block}

{/block}
{block name="script"}
	<script type="text/javascript" src="__PUBLIC__/novel/js/jquery.min.js"></script>
	<script type="text/javascript" src="__PUBLIC__/novel/js/common.js"></script>
	<script type="text/javascript">
		var page = 1;
		var max_page = {$count};
		var loading=false;
		

		//下拉加载
		$(window).scroll(function(){
		  if(loading || max_page==0){
			return;
		  }
		  var webheight = $(document).height();//网页高度
		  var top = document.documentElement.scrollTop + document.body.scrollTop; //滚动高度
		  if ((100 + $(window).scrollTop()) >= ($(document).height() - $(window).height())) {
			next();
		  }
		});

		function next(){
		  if(page >= max_page){
			$(".noData").show();
			return;
		  }
		  page++;
		  loading=true;
		  $(".noData").hide();
		  $(".loading").show();
		  var html="";
		  $.ajax({
			async: false,
			type:'get',
			url:'/personal/ajaxpaylog/?page='+page,
			dataType:'json',
			success:function(json){
			  $(".loading").hide();
			  loading=false;
			  if(json.code==200){
				$.each(json.cartoonrows,function(index,v){
					html += '<li><div class="orders-number">订单号：'+v.out_trade_no+'</div><div class="orders-cell"><div class="otext">充值<span>'+v.money+'</span>元</div><div class="ostatus">';
					if(v.status==1){
						html += '<span class="text-blue">已支付</span>';
					}else{
						html += '<span class="text-red">待支付</span>';
					}
					html += '</div></div></li>';
				});		
				$(".orders-list").append(html);
			  }else{
				$('.noData').show();
			  }          
			},
			error:function(){
			  loading=false;
			  $(".loading").hide();
			}
		  });
		}
	  </script>

{/block}